import React from 'react';
import { connect } from 'react-redux';
import { Button, Row, Col } from 'antd';
import List from './onlinePolicyList';
import CommonListsIndex from '../../../components/CommonLists/index';
import FilterTool from '../../../components/FilterTool';

function mapStateToProps(state) {
  return {
    strategy_type: state.code.strategy_type || [],
    strategy_mode: state.code.strategy_mode || []
  };
}

@connect(mapStateToProps)
class OnlinePolicyIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'policy';
    this.listsComponent = List;
    this.queryParams = {};
    this.initQueryPanigation = {
      current_page: 1,
      page_size: 10
    };
    this.queryPanigation = {
      current_page: 1,
      page_size: 10
    };
    this.queryTableParams = {
      app_id: props.app_id,
      event_id: props.event_id
    };
    this.state = {
      list: [],
      totalCount: 0,
      selectedRowKeys: [],
      selectedRows: []
    };
  }

  // 表列定义
  getColumns = () => {
    return [
      {
        title: '策略名称',
        key: 'name',
        dataIndex: 'name'
      },

      {
        title: '策略类型',
        key: 'strategy_type_name',
        dataIndex: 'strategy_type_name'
      },
      // {
      //   title: '优先级',
      //   key: 'prior',
      //   dataIndex: 'prior'
      // },
      {
        title: '关联事件',
        dataIndex: 'event_name',
        key: 'event_name'
      },
      {
        title: '所属渠道',
        dataIndex: 'app_name',
        key: 'app_name'
      }
    ];
  };

  handleSubmit = (value) => {
    this.props.sureQuote([value.strategy_id]);
    // if (this.state.selectedRowKeys && this.state.selectedRowKeys.length > 0) {
    //   if (this.props.sureQuote) {
    //     this.props.sureQuote(this.state.selectedRowKeys);
    //   }
    // } else {
    //   message.error('请至少勾选一条策略');
    // }
  };

  // 重置筛选项
  resetList = () => {
    this.queryPanigation = Object.assign({}, this.initQueryPanigation);
    if (this.state.events && this.state.events.length > 0) {
      this.setState({
        events: []
      });
    }
  };

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'Search',
        key: 'name',
        name: 'name',
        defaultValue: '',
        placeholder: '请输入关键词进行搜索'
      }
    ];
    // 策略选择配置
    // const rowSelection = {
    //   columnWidth: 30,
    //   onChange: (selectedRowKeys, selectedRows) => {
    //     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    //     this.setState({
    //       selectedRows,
    //       selectedRowKeys
    //     });
    //   },
    //   getCheckboxProps: record => ({
    //     name: record.strategy_id
    //   }),
    //   hideDefaultSelections: true,
    //   selectedRowKeys: this.state.selectedRowKeys
    // };
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={24}>
            {this.props.strategy_type && (
              <FilterTool
                ref='filterTool'
                data={data}
                colNum={2}
                query={this.freshQueryList}
                refreshFilter={this.refreshFilter}
                isOnChange={true}
                refresh={this.resetList}
                justify='end'
                defaultColumns={this.state.defaultColumns}
              />
            )}
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            {...this.props}
            rowKey='strategy_id'
            edit={this.edit}
            onChangePagination={this.onChangePagination}
            showDetail={this.showDetail}
            copy={this.copy}
            defaultColumns={this.state.defaultColumns}
            columns={this.getColumns()}
            queryList={this.freshQueryList}
            quoteFn={this.handleSubmit}
            // rowSelection={rowSelection}
          />
        </div>
        <div className='form-btn'>
          {/* <Button type='primary' onClick={this.handleSubmit}>
            引用
          </Button> */}
          <Button
            autoFocus={true}
            onClick={() => {
              this.props.closeModal();
            }}
          >
            取消
          </Button>
        </div>
      </div>
    );
  }
}

export default OnlinePolicyIndex;
